<template>
    <view v-if="visible" class="toast" :style="{ width: width, height: height }">
        {{ message }}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                message: '',
                width: '200px', // 设定宽度
                height: '50px' // 设定高度
            };
        },
        methods: {
            show(msg, width = '200px', height = '50px') {
                this.message = msg;
                this.width = width;
                this.height = height;
                this.visible = true;
                setTimeout(() => {
                    this.visible = false;
                }, 2000); // 2秒后隐藏
            }
        }
    };
</script>

<style>
    .toast {
        position: fixed;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        border-radius: 5px;
        text-align: center;
        padding: 10px;
        z-index: 9999;
    }
</style>